<template>
	<uni-popup type="bottom" ref="scoreCalc">
		<view class="scoreCalc">
			<div class="header">
				<img @click="close" src="../static/close.svg" class="close-icon" alt="" srcset="">
				<text class="header-title">积分结算</text>
			</div>
			<div class="score-list">
				<div class="score-item" v-for="(item,index) in result" :key="item.openid">
					<div class="score-item-left">
						<div class="score-user" :class="{'score-me':pay.userId === userId}" v-for="pay in item.pay"
							:key="pay.openid">
							<div class="score-user-left">
								<img :src="pay.avatar" class="avatar" alt="" srcset="">
								<text class="score-user-name">{{pay.name}}</text>
							</div>
							<div class="score-amount red">-{{pay.score}}分</div>
						</div>
					</div>
					<div class="score-item-middle">
						<div class="single" v-if="item.pay.length<=1">
							<div class="single-line"></div>
						</div>
						<div class="multipy" v-else>
							<div class="multipy-left">
								<div class="multipy-left-item" v-for="pay in item.pay">
									<div class="multipy-line"></div>
								</div>

							</div>
							<div class="multipy-middle">
								<div class="multipy-line"></div>
							</div>
							<div class="multipy-right">
								<div class="multipy-right-item">
									<div class="multipy-line"></div>
								</div>
							</div>
						</div>
					</div>
					<div class="score-item-right">
						<div class="score-user  " :class="{'score-me':item.userId === userId}">
							<div class="score-user-left">
								<img :src="item.avatar" class="avatar" alt="" srcset="">
								<text class="score-user-name">{{item.name}}</text>
							</div>
							<div class="score-amount blue">+{{item.score}}</div>
						</div>
					</div>
				</div>
			</div>

			<view class="room-btn">
				<button v-if="userId === leaderId" class="quit btn" @click="closeRoom">解散房间</button>
			</view>
		</view>
	</uni-popup>
</template>

<script>
	import {
		closeRoom
	} from '../api/room'
	export default {
		name: "ScoreCalcPopup",
		data() {
			return {
				result: [],
				userId: uni.getStorageSync('USERID')

			};
		},
		props: {
			leaderId: Number
		},
		methods: {
			closeRoom() {
				uni.showModal({
					content: "确定要解散房间？",
					confirmText: "确定",
					success: function(res) {
						if (res.confirm) {
							closeRoom().then(result => {
								uni.$emit("exitRoom", {})
								uni.navigateBack()

							})
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				})
			},
			open(memberList) {
				this.$refs.scoreCalc.open()
				this.result = this.calcScore(memberList)
				console.log('scoreCalc', this.result)
			},
			close() {
				this.$refs.scoreCalc.close()
			},
			calcScore(o) {
				if (0 === (null == o ? void 0 : o.length)) return [];
				try {
					var r = JSON.parse(JSON.stringify(o))
					var winnerList = r
						.filter(function(o) {
							return o.score > 0;
						})
						.sort(function(o, r) {
							return r.score - o.score;
						})
					var loserList = r
						.filter(function(o) {
							return o.score < 0;
						})
						.sort(function(o, r) {
							return o.score - r.score;
						})
					var result = [];

					winnerList.forEach(function(o) {
						console.log("winnerList", o)
						var r = o.score
						var n = {
							name: o.nickname,
							openid: o.openid,
							avatar: o.avatar,
							score: o.score,
							userId: o.userId,
							pay: [],
						};
						loserList.forEach(function(o) {
							if (!(r <= 0 || o.score >= 0)) {
								var e = Math.min(r, Math.abs(o.score))
								console.log("loserList", o)
								var t = {
									name: o.nickname,
									avatar: o.avatar,
									score: e,
									userId: o.userId,
									openid: o.openid,
								};
								n.pay.push(t), (r -= e), (o.score += e);
							}
						})
						result.push(n);
					})
					return result
				} catch (o) {
					return console.log("<输出> error", o), [];
				}
			}
		}
	}
</script>

<style scoped lang="scss">
	.scoreCalc::after {
		display: table;
		content: "";
		clear: both;
	}

	.scoreCalc {
		background-color: white;
		border-top-left-radius: 30upx;
		border-top-right-radius: 30upx;
		padding-top: 24upx;

		.header {
			height: 80upx;
			display: flex;
			align-items: center;
			justify-content: center;
			position: relative;


			.header-title {
				font-size: 30upx;
				font-weight: bolder;
			}

			.close-icon {
				width: 40upx;
				height: 40upx;
				position: absolute;
				left: 24upx;
				top: 20upx;
			}

		}

		.score-list {
			max-height: 700upx;
			overflow-y: auto;
			margin-left: 40upx;
			margin-right: 40upx;

			$score-user-height: 120upx;
			$score-user-box-height: $score-user-height +24upx;

			.score-item {
				display: flex;
				align-items: center;
				padding-bottom: 20upx;
				margin-top: 20upx;
				border-bottom: solid 1px $uni-color-second;

				.score-item-left {
					width: 40%;
					flex-shrink: 0;
					display: grid;
					grid-template-columns: 1fr;
					grid-row-gap: 20upx;

					.score-margin {
						margin-bottom: 20upx;
					}

				}

				.score-item-right {
					height: 100%;
					width: 40%;
					flex-shrink: 0;

				}

				.score-item-middle {
					flex-grow: 1;
					margin-left: 8upx;
					margin-right: 8upx;
					display: flex;
					align-self: stretch;

					.single {
						display: flex;
						align-items: center;
						width: 100%;


						.single-line {
							width: 100%;
							border-top: 2px solid $uni-color-primary;
						}
					}

					.multipy {
						display: flex;
						height: 100%;
						align-self: stretch;
						width: 100%;

						.multipy-left {
							display: grid;
							grid-template-columns: 1fr;
							grid-row-gap: 20upx;
							flex-grow: 1;
							align-self: stretch;

							.multipy-left-item {
								display: flex;
								align-items: center;

								.multipy-line {
									width: 100%;
									border-top: 2px solid $uni-color-primary;
								}
							}

						}

						.multipy-middle {
							display: flex;
							align-items: center;
							justify-content: center;
							align-self: stretch;

							.multipy-line {
								height: calc(100% - #{$score-user-box-height});
								flex-shrink: 0;
								border-left: solid 2px $uni-color-primary;
							}
						}

						.multipy-right {
							display: flex;
							align-items: center;
							justify-content: center;
							align-self: stretch;
							flex-grow: 1;

							.multipy-right-item {
								height: calc(100% - #{$score-user-box-height});
								flex-shrink: 0;
								display: flex;
								align-items: center;
								width: 100%;

								.multipy-line {
									width: 100%;
									border-top: 2px solid $uni-color-primary;
								}
							}
						}

					}
				}

				.score-user {
					border-radius: 8upx;
					display: flex;
					justify-content: space-between;
					align-items: center;
					padding: 12upx 20upx;
					height: $score-user-height;

					.score-user-left {
						display: flex;
						flex-direction: column;
						align-items: center;
						justify-content: center;

						.avatar {
							width: 80upx;
							height: 80upx;
						}

						.score-user-name {
							font-size: 30upx;
						}
					}

					.score-amount {
						font-size: 30upx;
						font-weight: bold;

					}

					.red {
						color: red;
					}

					.blue {
						color: $uni-color-primary;
					}

				}

				.score-me {
					background-color: $uni-color-second;
				}

			}

		}

		.room-btn {

			box-sizing: border-box;

			margin-bottom: 40upx;
			padding: 40upx;
			width: 100%
		}

		.btn {
			width: 100%;
			height: 80upx;
			color: white;
			font-size: 30upx;
			font-weight: bold;
			border-radius: 8upx;
			display: flex;
			justify-content: center;
			align-items: center;
		}

		.btn-primary {
			background-color: $uni-color-primary
		}

		.quit {
			background-color: #000
		}

	}
</style>